<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <script type="text/javascript" src="Vue.js"></script>
</head>

<body>
    <div id="root">
        <div>
            <input v-model = "inputValue"/>
            <button @click = "handleSubmit">提交</button>
        </div>
        <ul>
            <li v-for = "(item,index) of list" :key="index">{{item}}</li>
        </ul>
        <!-- <ul>
            <todo-item v-for= "(item,index) of list" :key="index"></todo-item>
        </ul> -->
    </div>
    <script>
        // Vue.component('todo-item',{
        //     template:'<li>item</li>'
        // })
        // var TodoItem = {
        //     template: '<li>item<li>'
        // }


    new Vue({
        el: "#root",
        // components:{
        //     'todo-item':TodoItem
        // },
        data: {
            inputValue:'',
            list:[]
        },
        methods: {
            handleSubmit: function () {
                this.list.push(this.inputValue)
                this.inputValue= ''

            }

        }
    })
    </script>
</body>

</html>